<template>
  <view class="container">
    <view style="margin: 10px;">
      <uni-collapse @change="changeListener">
        <uni-collapse-item v-for="(item, _index) in list" :key="_index" :name="item.name" :title="item.name"
                           :open="item.open">
          <uni-list v-for="(item, index) in item.pages" :key="index">
            <uni-list-item :title="item.name" @click="onChildClick(item.path)"></uni-list-item>
          </uni-list>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<script>
import {
  colorui,
  imgfilter,
  animation,
  commapi,
  device,
  keyboard,
  clock,
  waterfall,
  socketIo,
  devTest,
  openai,
  playback,
  groupUser
} from '@/router.js';

export default {
  data() {
    var list = [
      {
        id: 'form',
        name: '界面',
        pages: [
          {
            name: '颜色',
            path: colorui
          },
          {
            name: '动画效果',
            path: animation
          }
        ]
      },
      {
        id: 'special',
        name: '开放接口',
        pages: [
          {
            name: '设备能力',
            path: device
          }
        ]
      },
      {
        id: 'custom',
        name: '自定义组件',
        pages: [
          {
            name: '时钟',
            path: clock
          }
        ]
      },
      {
        id: 'other',
        name: '其他功能',
        pages: [
          {
            name: "测试功能",
            path: devTest
          },
          {
            name: "ChatAi",
            path: openai
          }
        ]
      }
    ];
    return {
      list
    };
  },
  methods: {
    onChildClick(event) {
      console.log(event);
      uni.navigateTo({
        url: event
      });
    },
    changeListener(event) {
      console.log("changeListener", event)
      let openName = event.openName
      let newList = this.list
      newList.forEach(item => {
        item.open = item.name === openName
      })
      console.log("changeListener", newList)
      // this.list = newList  //没有效果
    }
  }
};
</script>

<style>
page {
  background: #f7f7f7;
}

.container {
  width: 100%;
}
</style>
